<!-- 规则组件 -->
<template>
  <a-modal
    :visible='visible'
    title="多边形围栏绘制"
    width="100%"
    :footer="null"
    :mask-closable='false'
    :destroy-on-close='true'
    :style="{ top: '0px' }"
    @update:visible='updateVisible'
  >
    选圈点，已改点形成一个多边形，在进行调整范围
    <br/>
    坐标缩放程度：<a-input v-model:value="zoom" style="width: 100px;" />
    圈点:<a-input v-model:value="bdPoint.lng" style="width: 180px;" />
    <a-input v-model:value="bdPoint.lat" style="width: 180px;" />
    <a-button style="margin-left: 25px;" type='primary' html-type='button' @click='selectPointFinish'>已该点形成多边形</a-button>
    <a-button style="margin-left: 25px;" type='primary' html-type='button' @click='selectFinish'>多边形圈选完成</a-button>

    <baidu-map
      ak="OsoBFa0ZqPGS0UpqiiF0rVHsBp0kfQ5F"
      :scroll-wheel-zoom="true"
      style="height: 100vh;margin-top : 5px;"
      class="map"
      :zoom="zoom"
      :center="bdPoint"
      @moving="zoomAction"
      @moveend="zoomAction"
      @zoomend="zoomAction"
    >
      <bm-polygon
        :path="polygonPath" stroke-color="blue" :stroke-opacity="0.5" :stroke-weight="2"
        :editing="true"
        @lineupdate="updatePolygonPath"
      />
    </baidu-map>

  </a-modal>
</template>

<script>
import { BaiduMap, BmPolygon  } from 'vue-baidu-map-3x'
import { nextTick } from 'vue';
import { message } from 'ant-design-vue';

export default {
  name: 'DeviceVehicleConfigPolygonGeofenceBmap',
  emits: ['update:visible', 'done'],
  components: {
    BaiduMap,
    BmPolygon
  },
  props: {
    // 弹窗是否打开
    visible: Boolean,
    path : Object
  },
  created() {
    if (this.path && this.path.length > 0) {
      this.path.sort(function(a, b) {
        if(a.index < b.index){
          return -1;
        }else if(a.index > b.index){
          return 1;
        }else if(a.index == b.index){
          return 0;
        }
      });
      for(let i = 0; i < this.path.length;i++ ) {
        if (this.path[i].bd_latitude != null && this.path[i].bd_latitude != ""
          && this.path[i].bd_longitude != null && this.path[i].bd_longitude != ""
        ) {
          this.polygonPath.push({
            lng: this.path[i].bd_longitude, lat: this.path[i].bd_latitude
          });
        }
      }
      if (this.polygonPath.length > 0) {
        this.bdPoint = {
          lng: this.polygonPath[0].lng, lat: this.polygonPath[0].lat
        };
      } else {
        this.bdPoint = {
          lng: 116.404, lat: 39.915
        };
      }
    }
  },
  data() {
    return {
      bdPoint : {
        lng: 116.404, lat: 39.915
      },
      polygonPath : [],
      zoom : 13
    };
  },
  methods: {
    selectPointFinish() {
      let sourceLng = this.bdPoint.lng;
      let sourceLat = this.bdPoint.lat;
      this.polygonPath = [
        {
          lng: sourceLng - 0.03,
          lat: sourceLat + 0.001
        },
        {
          lng: sourceLng,
          lat: sourceLat
        },
        {
          lng: sourceLng + 0.01,
          lat: sourceLat - 0.025
        }
      ];
    },
    selectFinish() {
      let that = this;
      if (that.polygonPath.length < 3 || that.polygonPath.length > 10) {
        message.error("多边形点不能超过10个也不能少于3个");
        return;
      }
      that.$emit('done', that.polygonPath);
      // 关闭弹框，通过控制visible的值，传递给父组件
      that.updateVisible(false);
    },
    zoomAction(e) {
      let that = this;
      const { lng, lat } = e.target.getCenter();
      that.zoom = e.target.getZoom();
      nextTick(() => {
        that.bdPoint.lng = lng;
        that.bdPoint.lat = lat;
      })
    },
    updatePolygonPath(e) {
      this.polygonPath = e.target.getPath()
      console.log(this.polygonPath)
    },
    /**
     * 更新编辑界面的弹框是否显示
     *
     * @param value true-显示，false-隐藏
     * @author cancan
     * @date 2022/03/05 14:43
     */
    updateVisible(value) {
      this.$emit('update:visible', value);
    }
  }
};
</script>

<style lang="less" scoped>
.card-title {
  border-left: 5px solid;
  border-color: var(--primary-color);
  padding-left: 10px;
}

.card-title-background {
  background-color: #f5f5f5;
  height: 2em;
  line-height: 2em;
  margin-bottom: 2em;
}
</style>
